<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="../org/angular.min.js"></script>
</head>
<body>

<div ng-app="hd" ng-controller="ctrl">

    <table border="1" width="600px">
        <tr>
            <td ng-click="myOrderBy('id')">编号</td>
            <td ng-click="myOrderBy('click')">点击数</td>
            <td ng-click="myOrderBy('title')">标题</td>
        </tr>
        <tr ng-repeat="(k, v) in order_data">
            <td>{{v.id}}</td>
            <td>{{v.click}}</td>
            <td>{{v.title}}</td>
        </tr>
    </table>

    <table border="1" width="600px">
        <tr>
            <td ng-click="myOrderBy2('id')">编号
                <span ng-if="status.id">升序</span>
                <span ng-if="!status.id">降序</span>
                </td>
            <td ng-click="myOrderBy2('click')">点击数
                <span ng-if="status.click">升序</span>
                <span ng-if="!status.click">降序</span>
                </td>
            <td ng-click="myOrderBy2('title')">标题
                <span ng-if="status.title">升序</span>
                <span ng-if="!status.title">降序</span>
                </td>
        </tr>
        <tr ng-repeat="(k, v) in order_data">
            <td>{{v.id}}</td>
            <td>{{v.click}}</td>
            <td>{{v.title}}</td>
        </tr>
    </table>


</div>


<script>
    var m = angular.module('hd', []);
    m.controller('ctrl', ['$scope', '$filter', function ($scope, $filter) {

        $scope.order_data = [
            {id:1, click:100, title: '后盾人1'},
            {id:2, click:200, title: '后盾人2'},
            {id:3, click:300, title: '后盾人3'},
        ];
        /*第一种方法*/
        $scope.myOrderBy = function (filed) {
            /*arguments.callee 是函数引用，相当于一个全局的静态变量*/
            if(arguments.callee[filed] == undefined){
                arguments.callee[filed] = false;
            }
            arguments.callee[filed] = !arguments.callee[filed];
            /*filter的参数是要使用的过滤器，后面括号里面是过滤器的参数*/
            $scope.order_data = $filter('orderBy')($scope.order_data, filed, arguments.callee[filed]);
        }

        /*第二种方法*/
        $scope.status = {id: false, click:false, title:false};
        $scope.myOrderBy2 = function (filed) {
            $scope.status[filed] = !$scope.status[filed];
            /*filter的参数是要使用的过滤器，后面括号里面是过滤器的参数*/
            $scope.order_data = $filter('orderBy')($scope.order_data, filed, $scope.status[filed]);
        }

    }]);
</script>


</body>
</html>

